<template>
	<view>
		<view style="height: 18upx;"></view>
		<view v-if="enterpriseList.length" class="card-view">
			<view class="card-title">
				<image src="/static/partner-title-two.png" class="card-title-image"></image>
			</view>
			<view class="card-content">
				<view v-for="(item, index) in enterpriseList" :key="index" class="card-item">
					<image :src="`${IMG_URL}${item.coverImg}`" class="item-image" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view v-if="bankList.length" class="card-view">
			<view class="card-title">
				<image src="/static/partner-title-one.png" class="card-title-image"></image>
			</view>
			<view class="card-content">
				<view v-for="(item, index) in bankList" :key="index" class="card-item">
					<image :src="`${IMG_URL}${item.coverImg}`" class="item-image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view v-if="bankList.length && enterpriseList.length" class="desc-text">以上合作伙伴，排名不分先后。</view>
		<Empty v-if="!bankList.length && !enterpriseList.length"></Empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankList: [],
				enterpriseList: []
			};
		},
		onLoad(options) {
			this.getCooperationList()
		},
		methods: {
			async getCooperationList() {
				const res = await uni.$api.cooperationList()
				this.bankList = res.data['20'] || []
				this.enterpriseList = res.data['10'] || []
			}
		}
	}
</script>

<style scoped lang="scss">
	.desc-text {
		width: 100%;
		height: 160upx;
		margin-top: 43upx;
		text-align: center;
		font-weight: 400;
		font-size: 29rpx;
		color: #B8ACA3;
	}

	.card-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;

		.card-title {
			width: 100%;
			height: 138upx;
			position: relative;
			z-index: 1;

			.card-title-image {
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 1;
			}
		}


		.card-content {
			width: 100%;
			@extend .row-start;
			flex-wrap: wrap;
			padding-right: 25upx;
			padding-left: 12upx;
			border-radius: 14rpx;
			margin-top: -12upx;
			padding-bottom: 32upx;
			position: relative;
			z-index: 2;
			background: white;

			.card-item {
				width: calc(100% / 3 - 13upx);
				height: 163upx;
				margin-left: 13upx;
				margin-top: 22upx;

				.item-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.card-view+.card-view {
		margin-top: 12upx;
	}
</style>